<template>
  <div class="memberRefound">
    <section>
      <div class="memberTop jscenter" @click="selectType">
        <p class="topTitle">申请类型</p>
        <p class="placeholder">{{ refoundRes.title }}</p>
        <nut-image
          @click="selectType"
          class="rightIcon"
          :src="getAssetsFile('home/payOrder/rightArrow.png')"
        ></nut-image>
      </div>
    </section>

    <section>
      <div class="memberBody">
        <p class="bodyTitle">申请原因</p>
        <nut-input
          v-model="refoundRes.user_remark"
          type="textarea"
          rows="20"
          max-length="100"
          placeholder="请输入申请原因"
        />
      </div>
    </section>

    <section>
      <p class="refoudTitle">退款商品</p>
      <div class="orderItem" v-for="child in receptData.list" :key="child.id">
        <orderCard :options="child" @show="showFn"> </orderCard>
      </div>
    </section>

    <div class="orderBtn">
      <div class="total">
        共退款：
        <p><span>¥</span>{{ refoundRes.price }}</p>
      </div>
      <div class="buttonSmall ccenter" @click="submitApply">
        <nut-image
          class="orderClick"
          :src="getAssetsFile('home/payOrder/greenBtn.png')"
        ></nut-image>
        <p>提交申请</p>
      </div>
    </div>
    <refoundDialog
      ref="refoundDialogRef"
      @select="selectRefound"
    ></refoundDialog>

    <myDialog ref="tipRef" @confirm="confirmBtn" @cancel="cancelBtn">
      <template #title>
        <div class="dialogTop">
          <p class="dialogTitle">{{ refoundRes.title }}</p>
          <p class="titlePrice"><span>￥</span>{{ refoundRes.price }}</p>
        </div>
      </template>
      <div class="refundItem" v-for="child in receptData.list" :key="child.id">
        <div class="refundTop jscenter">
          <p class="refundTitle texthiden">
            {{ child.goods_name }}
          </p>
          <div class="refundPrice">
            <p>退款</p>
            <p class="price"><span>￥</span>{{ refoundRes.price }}</p>
          </div>
        </div>
        <p class="count">共{{ child.quantity }}件</p>
      </div>
      <template #cancel>取消</template>
      <template #confirm>确认退货退款</template>
    </myDialog>

    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile, isRes } from "@/utils/pub-use";
import orderCard from "@/components/orderCard/index.vue";
import { userRefundDetailApi, selfPrimingListApi } from "@/api/refound/index";
import myImagePreview from "@/components/imagePreview/index.vue";
import refoundDialog from "./component/refoundDialog.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "vue";
import { Toast } from "@nutui/nutui";
import myDialog from "@/components/Dialog/index.vue";
const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();
const refoundDialogRef = ref<InstanceType<typeof refoundDialog>>();
const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};
const route = useRoute();
const router = useRouter();
let refoundRes: any = ref({
  title: "请选择退款类型",
  user_remark: "",
  price: "",
  order_id: route.query.order_id,
});
//-----------------------------------------------获取数据-----------------------------------------------
let receptData: any = ref({});

const getList = async () => {
  let res = await userRefundDetailApi({ order_id: route.query.order_id });
  if (isRes(res)) {
    receptData.value = res.result;
    refoundRes.value.price = receptData.value.total_price;
  }
};
onMounted(() => {
  getList();
});
//
const tipRef = ref<InstanceType<typeof myDialog>>();
const openDialog = () => {
  tipRef.value?.openDialog();
};
const confirmBtn = async () => {
  let res = await selfPrimingListApi(refoundRes.value);
  if (isRes(res)) {
    router.push("/order");
  }
};
const cancelBtn = () => {
  tipRef.value?.closeDialog();
};

const submitApply = () => {
  if (!refoundRes.value.type) {
    Toast.fail("请选择退款类型");
  } else if (!refoundRes.value.user_remark) {
    Toast.fail("请填写申请原因");
  } else {
    openDialog();
  }
};

const selectType = () => {
  refoundDialogRef.value?.openDialog();
};

const selectRefound = (payload: any) => {
  refoundRes.value.title = payload.title;
  refoundRes.value.type = payload.id;
  refoundDialogRef.value?.closeDialog();
};
</script>

<style lang="scss" scoped>
.memberRefound {
  background: #f8f9fa;
  section {
    margin-top: 20px;
    background: #ffffff;
    padding: 20px;
  }
  .memberTop {
    .topTitle {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
    }
    .placeholder {
      color: #000000;
      font-size: 28px;
      margin-left: 40px;
      margin-right: auto;
    }
    .rightIcon {
      width: 26px;
      height: 26px;
    }
  }
  .memberBody {
    .bodyTitle {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
    }
    :deep(.nut-input) {
      padding-left: 0;
      padding-right: 0;
      textarea {
        min-height: 300px;
      }
    }
  }
  .refoudTitle {
    font-size: 32px;
    font-weight: 500;
  }
  .orderBtn {
    position: fixed;
    bottom: 0;
    z-index: 2000;
    margin-top: 48px;
    height: 112px;
    background: #ffffff;
    padding: 10px 30px 10px 53px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    p {
      color: #999999;
      font-size: 24px;
    }
    .total {
      display: flex;
      align-items: flex-end;
      color: #000000;
      font-size: 28px;
      margin-left: 13px;
      p {
        color: #f55726;
        font-size: 28px;
        span {
          font-size: 24px;
        }
      }
    }
    .buttonSmall {
      position: relative;
      margin-left: 20px;
      .orderClick {
        width: 200px;
        height: 80px;
      }
      p {
        position: absolute;
        color: #ffffff;
        font-weight: 500;
        font-size: 30px;
      }
    }
  }
  .dialogTop {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 30px;
    font-weight: 500;
    color: #000000;
    font-size: 36px;
    .titlePrice {
      margin-left: 5px;
      font-weight: 500;
      color: #f55726;
      span {
        font-size: 30px;
      }
    }
  }
  .refundItem {
    margin-top: 38px;
    padding: 0 30px;
    border-bottom: 1px solid #eee;
    .refundTop {
      .refundTitle {
        text-align: left;
        width: 300px;
        color: #000000;
        font-size: 26px;
      }
      .refundPrice {
        display: flex;
        align-items: center;
        color: #000000;
        font-size: 26px;
        .price {
          color: #f55726;
          span {
            font-size: 20px;
          }
        }
      }
    }
    .count {
      margin-top: 7px;
      text-align: left;
      margin-bottom: 18px;
    }
  }
  .refundItem:last-child {
    border-bottom: none;
  }
}
</style>
